import { Layout, Menu,Dropdown, message,Upload,Button} from 'antd';
import React,{ Suspense } from 'react';
import {Redirect,Route,Switch,HashRouter,Link,withRouter} from 'react-router-dom';
import PaymentOrder from '../paymentOrder/index'
import Reapair from '../repairMangement/index'
import System from '../systemManagement/index'
import AdminMessage  from '../adminMessage';
import User from '../userManagement/index'
import News from '../news/index'
import { saveAs } from 'file-saver';
import {connect} from 'react-redux'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  UploadOutlined,
  UsbOutlined,
  ToolOutlined,
  ExportOutlined,
  CalendarOutlined,
  SettingOutlined
} from '@ant-design/icons';
import './index.css'
import {reqGetInventory} from '../../api/index'

const { Header, Sider, Content } = Layout;

class Home extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      collapsed: false,
    };
    this.handleOnclick = this.handleOnclick.bind(this)
    this.handleOutclick = this.handleOutclick.bind(this)
  }
  handleOutclick(){
    reqGetInventory().then(res=>{
      saveAs(res,'库存信息.xlsx')
    })
  }
  handleOnclick(){
    console.log(123)
    this.props.dispatch({type:'cancleLogin'})
    message.success("您已经退出登录")
    setTimeout(()=>{
      this.props.history.push('/login')
    },1000)
  }
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
  componentDidMount(){
      console.log(this.props)
  }
  render() {
    const baseUrl = 'http://192.168.109.170/api';
    const props = {
      name: 'file',
      action: baseUrl+'/admin/importExcel',
      // headers: {
      //   authorization: 'authorization-text',//携带token
      // },
      onChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} 文件导入成功`);
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} 文件导入失败`);
        }
      },
    };
    const props1 = {
      name: 'file',
      action: baseUrl+'/admin/addTeacher',
      // headers: {
      //   authorization: 'authorization-text',//携带token
      // },
      onChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} 文件导入成功`);
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} 文件导入失败`);
        }
      },
    };
    const menu = (
      <Menu>
        <Menu.Item onClick={this.handleOnclick}>
        <ExportOutlined /> 退出登录
        </Menu.Item>
      </Menu>
    );
    return (
     <div className="homePage">
          <Layout className="homePage">
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" >
            <span className="fontStyle">后台管理系统</span>
          </div>
          
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
          <Menu.Item key="1" icon={<CalendarOutlined />}>
            <Link to='/home/allMessage'>全部库存信息</Link>
            </Menu.Item>
            <Menu.Item key="2" icon={<ToolOutlined />}>
            <Link to='/home/warehousing'>入库管理</Link>
            </Menu.Item>
            {/* <Menu.Item key="2" icon={<PropertySafetyOutlined />}>
              <Link to='/home/payment'>缴费管理</Link>
            </Menu.Item> */}
            <Menu.Item key="3" icon={<SettingOutlined />}>
            <Link to='/home/delivery'>出库管理</Link>
            </Menu.Item>
            {/* <Menu.Item key="4" icon={<UserOutlined />}>
            <Link to='/home/user'>用户管理</Link>
            </Menu.Item> */}
            <Menu.Item key="4" icon={<CalendarOutlined />}>
            <Link to='/home/news'>超期物品信息</Link>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background headerStyle" style={{ padding: 0 }}>
            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: this.toggle,
            })}
            <Button className="outButton" onClick={this.handleOutclick} icon={<UploadOutlined />}>导出库存信息</Button>
            <Upload className="optionButtons" {...props}>
            <Button  icon={<UsbOutlined />}>导入库存信息</Button>
             </Upload>
             <Upload className="optionButton" {...props1}>
            <Button  icon={<UsbOutlined />}>导入老师信息</Button>
             </Upload>
            <div className="userName">
            <Dropdown overlay={menu}>
            <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
            <UserOutlined  style={{fontSize:20}}/>
            </a>
            </Dropdown> 尊敬的管理员，您好！
            {/* </Dropdown> 尊敬的{this.props.useUserMessage.role}，{this.props.useUserMessage.username}您好！ */}
            </div>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight:600,
            }}
          >
              <div className="homeContent">
                    <Switch>
                        <Route path='/home/payment' component={PaymentOrder} />
                        <Route path='/home/warehousing' component={Reapair} />
                        <Route path='/home/delivery' component={System} />
                        <Route path='/home/user' component={User} />
                        <Route path='/home/news' component={News}/>
                        <Route path='/home/allMessage' component={AdminMessage}/>
                    </Switch>
                    <Redirect to='/home/allMessage'/>
              </div>
          </Content>
        </Layout>
      </Layout>
     </div>
    );
  }
}
const mapStateToProps = (state)=>{
  console.log(state)
  return {
      useUserMessage:state.useUserMessage
  }
}
export default connect(mapStateToProps)(Home)